<template>
  <div class="card">
    <div class="module-head">
      <div class="title">
        <img src="../../../assets/images/title-arrow.png" class="arrow" />
        还款信息
      </div>
      <slot name="btn"></slot>
    </div>
    <el-form class="key-value" ref="appraiseForm" label-suffix="：" label-width="130px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="欠款金额">{{ details.questionMainInfo.govArrears.arrearsAmount | unitMoney }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="已支付金额">{{ details.payedAmount | unitMoney }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="确认欠款金额">{{ details.confirmUnPayAmount | unitMoney }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="已还全部欠款">{{ details.payAllAmount | baseBool }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="制定还款计划">{{ details.makePayPlan | baseBool }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="details.makePayPlan === '1'" label="制定计划金额">
            {{ details.makePayPlanAmount | unitMoney }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="details.makePayPlan === '1'" :gutter="20">
        <!--                    <el-col :span="8">-->
        <!--                      <el-form-item label="协商一致还款金额">{{ (details.makePayPlanAmount - details.payedAmount) | money }}</el-form-item>-->
        <!--                    </el-col>-->
        <el-col :span="8">
          <el-form-item label="计划已支付">{{ details.payAmountPayed | unitMoney }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划未支付">{{ details.payAmountNoPay | unitMoney }}</el-form-item>
        </el-col>
        ·
      </el-row>
      <el-form-item label="支付备注">
        <div v-html="txt2HTML(details.payNote)"></div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { txt2HTML, baseBool, unitMoney } from "@/utils/filters";
export default {
  name: "RepayInfo",
  components: {},
  filters: { unitMoney, baseBool },
  props: {
    details: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},

  created() {},
  methods: { txt2HTML },
};
</script>
<style lang="less" scoped>
.el-form-item__content {
  div {
    word-break: break-all;
  }
}
</style>
